import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Button, Card, Form, message} from 'antd';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import List from './components/List'
import DataModal from './components/Modal'
import MenuModal from './components/MenuModal'
import styles from './index.less';

@connect(state => ({
  role: state.role,
}))
@Form.create()
export default class index extends PureComponent {
  state = {
    menuModalVisible:false,
    modalVisible: false,
    selectedRows: [],
    items: {},
    modalType: 'add',
  };

  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: 'role/fetch',
    });
    dispatch({
      type: 'role/queryMenu',
    });
  }

  handleSelectRows = (rows) => {
    this.setState({
      selectedRows: rows,
    });
  }

  handleAddModal = () => {
    this.setState({
      modalVisible: true,
      modalType: 'add',
      items: {}
    });
  }

  handleModalCancel = () => {
    this.setState({
      modalVisible: false,
      items: {}
    });
  }

  handleMenuModalCancel = () => {
    this.setState({
      menuModalVisible: false
    });
  }

  onEditItem = (item, flag) => {
    console.log(item);
    this.setState({
      modalVisible: !!flag,
      items: item,
      modalType: 'edit'
    });
  }

  onOpenMenuModel = (item) => {
    this.setState({
      menuModalVisible: true,
      items: item
    });
  }

  handleSave = (values, form) => {
    const _this = this;
    const {dispatch} = this.props;
    dispatch({
      type: 'role/' + this.state.modalType,
      payload: values,
      callback: (result) => {
        if (result.resultCode === "1") {
          _this.setState({
            modalVisible: false,
            items: {}
          });
          form.resetFields();
          message.success(result.resultDesc);

        } else {
          message.error(result.resultDesc);
        }
      },
    });
  }

  handleMenuSave = (values, form) => {
    const _this = this;
    const {dispatch} = this.props;
    dispatch({
      type: 'role/saveRoleMenu',
      payload: values,
      callback: (result) => {
        if (result.resultCode === "1") {
          _this.setState({
            menuModalVisible: false,
            items: {}
          });
          form.resetFields();
          message.success(result.resultDesc);
        } else {
          message.error('操作失败！');
        }
      },
    });
  }


  render() {
    const {role: {loading, data, menuData:{rows: menuList}}} = this.props;
    const {selectedRows, modalVisible, modalType, items, menuModalVisible} = this.state;

    return (
      <PageHeaderWrapper title="角色列表">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Button style={{width:'100%'}} icon="plus" type="dashed" onClick={this.handleAddModal}>
                新建
              </Button>
            </div>
            <List
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              onSelectRow={this.handleSelectRows}
              onEditItem={this.onEditItem}
              onOpenMenuModel={this.onOpenMenuModel}
            />
          </div>
        </Card>
        <DataModal
          title={modalType === 'add' ? '新增' : '修改'}
          modalVisible={modalVisible}
          handleSave={this.handleSave}
          handleModalCancel={this.handleModalCancel}
          items={items}
        />
        <MenuModal
          key={Date.now()}
          modalVisible={menuModalVisible}
          handleSave={this.handleMenuSave}
          handleModalCancel={this.handleMenuModalCancel}
          items={items}
          menuList={menuList}
        />
      </PageHeaderWrapper>
    );
  }
}
